<template>
    <view>
        <uni-search-bar 
            @confirm="search" :focus="true" v-model="searchValue" 
            @blur="blur" @focus="focus" @input="input"
            @cancel="cancel" @clear="clear" placeholder="搜索育儿知识">
        </uni-search-bar>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义搜索值的响应式变量
const searchValue = ref('');

// 搜索确认事件处理函数
const search = (value) => {
    console.log('搜索内容：', value);
};

// 失去焦点事件处理函数
const blur = () => {
    console.log('失去焦点');
};

// 获得焦点事件处理函数
const focus = () => {
    console.log('获得焦点');
};

// 输入事件处理函数
const input = (value) => {
    console.log('输入内容：', value);
};

// 取消事件处理函数，点击取消后跳转到指定页面
const cancel = () => {
    uni.switchTab({
        url: '/pages/home/home',
        success: () => {
            console.log('跳转成功');
        },
        fail: (err) => {
            console.error('跳转失败：', err);
        }
    });
};

// 清空事件处理函数
const clear = () => {
    console.log('清空搜索框');
};
</script>

<style>
       
</style>